<template>
  <details-layout
    :data="data"
    :related="related"
    channel="industryeval"
    titleField="名称"
    dateField="日期"
    contentField="描述">
    <div v-if="data && data.id && !data.本地工具" class="full-width row justify-end q-pr-sm">
      <q-btn class="absolute bg-accent text-white"
        icon="fa fa-bell" :label="$t('我要申请')" size="md" style="border-radius: 6px;"
        @click="apply"></q-btn>
    </div>

    <div v-if="data && data.id && data.本地工具 && data.K" class="full-width row justify-end q-pr-sm">
      <q-btn class="absolute bg-accent text-white"
        icon="fa fa-key" :label="$t('回调密钥')" size="md" style="border-radius: 6px;"
        @click="copyKey"></q-btn>
    </div>

    <div class="title text-center q-px-lg">{{data.名称}}</div>
    <div class="info row no-wrap relative-position justify-end">
      <div class="type absolute-center">{{$t('类型')}}: {{data.类型}}</div>
      <div class="date">{{data.日期 | normalDate}}</div>
    </div>
    <div class="details" v-html="data.详情"></div>
    <div class="q-pa-xl">
      <input-field :Field="{
        Type: 'FileList',
        ReadOnly: true,
        Name: 'files',
      }" :values="data"></input-field>
    </div>
  </details-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { copyToClipboard } from 'quasar';
import DetailsLayout from '../../components/detailsLayout.vue';
import { RefreshOnIDChange, RefreshRelatedOnIDChange } from '../../components/mixins/data';
import { GoHomeOnLocaleChange } from '../../components/mixins/locale';

export default {
  name: 'IndustryEvalDetails',
  mixins: [mixins.ObjectDataMixin, RefreshOnIDChange,
    RefreshRelatedOnIDChange, GoHomeOnLocaleChange],
  components: {
    DetailsLayout,
  },
  data() {
    return {
      related: [],
      申请字段: [
        {
          Index: 0,
          Required: false,
          Type: 'Category',
          Label: '申请信息',
        },
        {
          Index: 1,
          Required: true,
          Name: '名称',
          Label: '名称',
          Type: 'String',
          Options: {
            MaxLength: 200,
          },
        },
        {
          Index: 2,
          Required: true,
          Name: '版本号',
          Label: '版本号',
          Type: 'String',
          Options: {
            MaxLength: 30,
          },
        },
        {
          Index: 3,
          Name: '来源',
          Label: '样品来源',
          Type: 'String',
          Options: {
            MaxLength: 300,
          },
        },
        {
          Index: 4,
          Name: '附件',
          Label: '附件',
          Type: 'FileList',
          MaxValue: '10m',
          Options: {
            Auto: true,
            Ext: 'zip',
            MaxTotal: '50m',
          },
        },
        {
          Index: 5,
          Label: '联系信息',
          Type: 'Category',
        },
        {
          Index: 6,
          Required: true,
          Name: '单位',
          Label: '单位名称',
          Type: 'String',
          Options: {
            MaxLength: 200,
          },
        },
        {
          Index: 7,
          Required: true,
          Name: '联系人',
          Label: '联系人',
          Type: 'String',
          Options: {
            MaxLength: 100,
          },
        },
        {
          Index: 8,
          Required: true,
          Name: '电话',
          Label: '联系电话',
          Type: 'String',
          Options: {
            MaxLength: 20,
          },
        },
        {
          Index: 9,
          Required: true,
          Name: '邮件',
          Label: '电子邮件',
          Type: 'String',
          Options: {
            MaxLength: 100,
          },
          Rules: [
            'validatorEmail',
          ],
        },
        {
          Index: 10,
          Name: '描述',
          Label: '描述信息',
          Type: 'Text',
          Options: {
            MaxLength: 2000,
          },
        },
      ],
    };
  },
  created() {
    this.getRelated();
  },
  methods: {
    getRelated() {
      this.getRequest(`/portal/industryeval/related/${this.$route.params.id}`, { limit: 5 }).then((d) => {
        if (d && d.msg === 'OK') {
          this.related = d.data.docs;
        }
      });
    },
    apply() {
      this.postRequest('/logedin').then((res) => {
        if (res && res.msg && (res.msg.code === 401)) {
          this.$router.push(`/login?redirect=${this.$route.fullPath}`);
        } else {
          const applyData = {};

          this.showNotifyDialog({
            content: `申请 "${this.data.名称}"`,
            warning: this.$t('请确保填写的信息真实无误！'),
            // tips: '一些tips',
            fields: this.申请字段,
            fieldsData: applyData,
            fieldsClass: 'service-apply-dialog input-field-list full-width',
            canCancel: true,
            size: {
              w: 550,
            },
            okText: this.$t('okButtonText'),
            cancelText: this.$t('cancelButtonText'),
          }, () => {
            this.postRequest(`/portal/industryeval/apply/${this.data.id}`, applyData).then((d) => {
              if (d && d.data && d.data.id) {
                this.$q.notify({
                  message: this.$t('申请已提交！'),
                  color: 'positive',
                  icon: 'check',
                  position: 'top',
                  timeout: 2000,
                });
              } else {
                this.$q.notify({
                  message: this.$t('申请失败！'),
                  color: 'negative',
                  icon: 'warning',
                  position: 'top',
                  timeout: 2000,
                });
              }
            });
          });
        }
      });
    },
    copyKey() {
      if (!this.data.K) {
        this.$q.notify({
          message: this.$t('没有密钥！'),
          color: 'negative',
          icon: 'warning',
        });

        return;
      }

      copyToClipboard(this.data.K)
        .then(() => {
          this.$q.notify({
            message: this.$t('密钥已复制到剪贴板！'),
            color: 'positive',
            icon: 'check',
          });
        })
        .catch(() => {
          this.$q.notify({
            message: this.$t('复制失败！'),
            color: 'negative',
            icon: 'warning',
          });
        });
    },
    showNotifyDialog(options, func) {
      this.$MsgDialog({ type: '', ...options })
        .then(() => {
          if (func && typeof func === 'function') {
            func();
          }
        })
        .catch(() => { });
    },
  },
};
</script>
